<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>inHarmony Homepage | Yoursite.com</title>

<meta name="keywords" content="keyword phrase 1, keyword phrase 2" />
<meta name="description"
	content="inHarmony is a perfect corporate html template." />

<link rel="Shortcut Icon" type="image/ico" href="imgs/favicon.ico" />

<meta name="viewport" content="width=device-width, initial-scale=1" />

<!-- CSS ______________________________________-->
<link
	href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800"
	rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/magnificpopup.css">
<link rel="stylesheet" href="css/font-awesome.min.css">

<link href="css/master.css" rel="stylesheet">
<link href="css/colors-classic.css" rel="stylesheet">
<!-- The color scheme -->

<!-- Javascripts ______________________________________-->
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- include Easing -->
<script src="js/jquery.easing.js"></script>
<!-- include Cycle -->
<script src="js/jquery.cycle.all.js"></script>
<!-- include jCarousel -->
<script src="js/jquery.jcarousel.min.js"></script>
<!-- include image popups -->
<script src="js/jquery.magnific-popup.min.js"></script>
<!-- include mobile menu -->
<script src="js/jquery.mobilemenu.js"></script>
<!-- include custom script -->
<script src="js/scripts.js"></script>

<!-- Fixing Internet Explorer ______________________________________-->
<!--[if IE]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<link rel="stylesheet" href="css/ie.css" />
	<![endif]-->

<!--[if IE 7]>
		<link rel="stylesheet" href="css/ie7.css" />
		<link rel="stylesheet" href="css/font-awesome-ie7.min.css">
	<![endif]-->
</head>

<body class="home">

	<div id="wrapperbox">

		<!-- HEADER ______________________________________-->
		<header role="banner">
			<jsp:include page="template/banner.jsp" />
			<!-- END .wrapper -->

			<!-- Main menu _____ _________________________________-->
			<nav id="mainmenu" role="navigation">
				<jsp:include page="template/mainmenu.jsp" />
			</nav>
			<!-- END #mainmenu -->
		</header> 
		<jsp:include page="${aside}"/>   
		<jsp:include page="${body}"/>   
		<!-- Footer ______________________________________-->
		<footer role="contentinfo" id="footer">
			<jsp:include page="template/footer.jsp" />
		</footer>
	</div>
	<!-- END #wrapperbox -->
	<br class="clear" />
	<!-- This is the end, my friend -->


	<!-- Initializing scripts ______________________________________-->
	<script>
		jQuery(window).load(function() {
			// init Cycle for slider

			$('#slides').after('<div id="circle-pager">').cycle({
				fx : 'fade',
				speed : 300,
				timeout : 8000,
				cleartype : true,
				cleartypeNoBg : false,
				pager : '#circle-pager',
				next : '#slider .next1',
				prev : '#slider .prev1',
				slideResize : true,
				fit : 1,
				width : '100%',
				before : function(currSlideElement, nextSlideElement) {
					// hide elements and put them in start position		
					$(this).find('.slide-image').css({
						'opacity' : '0',
						'left' : '-50px'
					});
					$(this).find('.slide-text').css({
						'opacity' : '0',
						'top' : '0'
					});
					$(this).find('.slide-text p').css({
						'opacity' : '0',
						'left' : '15px'
					});
				},
				after : function(currSlideElement, nextSlideElement) {
					// fade in image
					$(this).find('.slide-image').animate({
						'opacity' : '1',
						'left' : '0'
					}, 500, 'linear');
					// bring the text box from top
					$(this).find('.slide-text').delay(500).animate({
						'opacity' : '1',
						'top' : '25%'
					}, 500, 'easeOutBack');
					// bring the paragraphs in
					$(this).find('.slide-text p:eq(0)').delay(500).animate({
						'opacity' : '1',
						'left' : '0'
					}, 500, 'easeOutBack');
					$(this).find('.slide-text p:eq(1)').delay(700).animate({
						'opacity' : '1',
						'left' : '0'
					}, 500, 'easeOutBack');
					$(this).find('.slide-text p:eq(2)').delay(900).animate({
						'opacity' : '1',
						'left' : '0'
					}, 500, 'easeOutBack');
					$(this).find('.slide-text p:eq(3)').delay(1100).animate({
						'opacity' : '1',
						'left' : '0'
					}, 500, 'easeOutBack');

				}
			});

			// init Cycle for testimonials
			$('#quotes').cycle({
				fx : 'fade',
				speed : 400,
				timeout : 0,
				cleartype : false,
				next : '#quotes-nav .next2',
				prev : '#quotes-nav .prev2',
				slideResize : true,
				fit : 1,
				width : '100%'
			});

			// init jCarousel for portfolio projects
			$('.carousel4').jcarousel({
				'visible' : 4,
				'wrap' : 'both'
			});
			$('#latest-projects .prev1').click(function() {
				$('.carousel4').jcarousel('scroll', '-=1');
			});
			$('#latest-projects .next1').click(function() {
				$('.carousel4').jcarousel('scroll', '+=1');
			});

			// init jCarousel for recent news
			$('.carousel-vert4').jcarousel({
				'vertical' : true,
				'visible' : 4,
				'wrap' : 'both'
			});
			$('#recent-news .prev2').click(function() {
				$('.carousel-vert4').jcarousel('scroll', '-=1');
			});
			$('#recent-news .next2').click(function() {
				$('.carousel-vert4').jcarousel('scroll', '+=1');
			});

			// init jCarousel for client logos
			$('.carousel7').jcarousel({
				'wrap' : 'circular'
			}).jcarouselAutoscroll({
				'interval' : 2000,
				'autostart' : true,
				'target' : '+=1'
			});
		});
	</script>

	<!-- Your Google Analytics ______________________________________-->
	<script type="text/javascript">
		var _gaq = _gaq || [];
		_gaq.push([ '_setAccount', 'UA-XXXXXXX-X' ]);
		_gaq.push([ '_trackPageview' ]);

		(function() {
			var ga = document.createElement('script');
			ga.type = 'text/javascript';
			ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl'
					: 'http://www')
					+ '.google-analytics.com/ga.js';
			var s = document.getElementsByTagName('script')[0];
			s.parentNode.insertBefore(ga, s);
		})();
	</script>
</body>
</html>
